<template>
	<view>
		<view class="bg-blur"></view>
		<view class="cat-input-wrap" :style="{'bottom': inputWrapBottom +'px'}">
			<view class="input-send-btn flex-ali-center flex-juscon-bet">
				<textarea 
				auto-blur 
				@focus="inputOnFocus" 
				@blur="inputBlur"  
				@input="handleInput"
				@linechange="linechange"
				v-model="commentValue"
				:focus="focus"
				:style="{'height':inputHeight + 'px'}"
				maxlength= -1
				fixed/>
				<view class="iconfont icon-400biaoqing_biaoqing biaoqin"></view>
				<view @click="clickSend" class="send-btn">发送</view>
			</view>
			<!-- <view class="features-wrap flex-ali-center flex-center-around">
				<view class="iconfont icon-yuyin1"></view>
				<view class="iconfont icon-tupian"></view>
				<view class="iconfont icon-xiangji"></view>
				<view class="iconfont icon-jiahao"></view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyboarHeight:0,
				inputWrapBottom:0,
				inputHeight:25,
				focus:true,
				commentValue:''
			};
		},
		props:{
			value: {
				type:String,
				default:''
			}
		},
		onLoad() {
			uni.onKeyboardHeightChange(res => {
				this.keyboarHeight = res.height
				console.log(res.height)
			})
			this.inputHeight = uni.upx2px(50)
		},
		methods:{
			inputOnFocus(e){
				 this.inputWrapBottom = uni.upx2px(20)
				 this.$emit("inputOnFocus",e)
			},
			inputBlur(){
				this.$emit("inputBlur")
				this.inputWrapBottom = 0
			},
			clickSend(){
				this.$emit("clickSend", this.commentValue)
				this.commentValue = ''
			},
			handleInput(e){
				this.$emit('input', e.target.value)
			},
			linechange(e){
				this.$emit('linechange', e.detail)
				this.inputHeight = e.detail.height
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cat-input-wrap{
		width: 100%;
		mini-height: 200rpx;
		padding: 15rpx 20rpx;
		background-color: rgba(255,255,255,0.9);
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;
		box-sizing: border-box;
		border-top: #CCCCCC 1rpx solid;
		.input-send-btn{
			textarea{
				background-color: rgba(242, 242, 242, 0.95);
				// margin: 10 20rpx;
				padding: 10rpx;
				font-size: 30rpx;
				min-height: 50rpx;
				max-height: 190rpx;
				border-radius: 10rpx;
				line-height: 40rpx;
				// margin-right: 10rpx;
				width: 600rpx;
			}
			.send-btn{
				width: 100rpx;
				background-color: $fun-theme-color;
				color: $fun-text-color;
				font-size: 22rpx;
				text-align: center;
				border-radius: 20rpx;
				padding: 20rpx 0;
			}
			.biaoqin{
				// background-color: $fun-theme-color;
				color: $fun-text-color;
				font-size: 60rpx;
				text-align: center;
				border-radius: 20rpx;
				margin: 0 20rpx;
			}
		}
		.features-wrap{
			margin-top: 20rpx;
			view{
				font-size: 50rpx;
				color: $fun-text-6-color;
			}
		}
	}
	
</style>
